/* 管理整个项目中单文件组件路由路由配置 */

// 引入路由组件，@ 代表 src 目录的绝对路径
import HeaderBar from '@/components/header-bar'
import HeaderSearch from '@/components/header-search'
import FooterBar from '@/components/footer-bar'
import Home from '@/views/home'
import Category from '@/views/category'
import Cart from '@/views/cart'
import Detail from '@/views/detail'
import Mine from '@/views/mine'
import SubCategory from '@/views/category/SubCategory'
import Login from '@/views/login'
import Confirm from '@/views/confirm'

// 定义路径数组
const routes = [
  {
    path: '/',
    redirect: '/home' // 重定向
  },
  {
    path: '/home', // 借助 vue-router，使用嵌套路由配置，显示时显示 path 地址内容
    components: {
      headerSeach: HeaderSearch,
      default: Home,
      footer: FooterBar
    },
    meta: { // meta,路由元信息，实在开发过程中需要使用到的一些额外数据
      inFooter: true, // 是否显示到 footer 上
      title: '首页', // 显示的文本标题
      icon: '&#xe625;' // footer 图标 Unicode 编码
    }
  },
  {
    path: '/category',
    components: {
      header: HeaderBar, // 是否显示到HeaderBar上
      default: Category,
      footer: FooterBar
    },
    children: [ // 子路由，嵌套路由
      {
        path: 'sub-category/:cid?', // 完整路径：/category/sub-category/5，:cid 是动态路径参数的定义
        component: SubCategory
      }
    ],
    meta: { // meta,路由元信息，实在开发过程中需要使用到的一些额外数据
      inFooter: true, // 是否显示到 footer 上
      title: '分类', // 显示的文本标题
      icon: '&#xe626;' // footer 图标 Unicode 编码
    }
  },
  {
    path: '/cart',
    components: {
      header: HeaderBar, // 是否显示到HeaderBar上
      default: Cart
    },
    meta: { // meta,路由元信息，实在开发过程中需要使用到的一些额外数据
      inFooter: true, // 是否显示到 footer 上
      title: '购物车', // 显示的文本标题
      icon: '&#xe611;' // footer 图标 Unicode 编码
    }
  },
  {
    path: '/detail',
    components: {
      header: HeaderBar, // 是否显示到HeaderBar上
      default: Detail
    },
    meta: { // meta,路由元信息，实在开发过程中需要使用到的一些额外数据
      title: '商品详情' // 显示的文本标题
    }
  },
  {
    path: '/mine',
    components: {
      header: HeaderBar, // 是否显示到navbar上
      default: Mine,
      footer: FooterBar
    },
    meta: { // meta,路由元信息，实在开发过程中需要使用到的一些额外数据
      inFooter: true, // 是否显示到 footer 上
      title: '我的', // 显示的文本标题
      icon: '&#xe608;' // footer 图标 Unicode 编码
    }
  },
  {
    // 登录
    path: '/login',
    components: {
      header: HeaderBar,
      default: Login
    },
    meta: {
      title: '用户登录'
    }
  },
  {
    // 确认订单
    path: '/confirm',
    name: 'confirm',
    components: {
      header: HeaderBar,
      default: Confirm
    },
    meta: {
      title: '订单确认'
    }
  }
]
// 导出路由文件
export default routes
